<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>logs</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      font-size: 14px;
      font-family: "Times New Roman", Times, serif;
    }
    #table tbody tr:hover {
      /* background-color: #99CCFF !important; */
      background-color: #0099cc !important;
    }
    #table tbody tr {
      height: 30px;
    }

    #table tbody tr:nth-child(2n+1) {
      background-color: rgb(234, 234, 234);
    }

    #table tbody tr:nth-child(2n) {
      background-color: rgb(223, 223, 223);
    }

    .first {
      color: #666;
      display: inline-block;
      vertical-align: top;
      border: 1px solid #e6e6e6;
      padding: 5px 9px;
      font-size: 12px;
    }

    #number {
      display: inline-block;
      vertical-align: top;
    }

    .num {
      color: #666;
      display: inline-block;
      vertical-align: top;
      border: 1px solid #e6e6e6;
      padding: 5px 9px;
      font-size: 12px;
      margin-right: 6px;
    }

    .current {
      color: #3e89fa;
      font-size: 12px;
      display: inline-block;
      vertical-align: top;
      margin-left: 30px;
      padding: 5px 9px;
    }

    #inp {
      height: 32px;
      width: 32px;
    }

    .jump {
      display: inline-block;
      vertical-align: top;
      font-size: 12px;
    }

    .l_jump {
      display: inline-block;
      vertical-align: top;
      padding: 5px 9px;
      border: 1px solid #e6e6e6;
    }
  </style>
  <script language=JavaScript src="../js/iframe.js"/></script>
  <script src="../js/jquery.js"></script>
</head>

<body>
  <table width="95%" border="0" cellpadding="0" cellspacing="0">
    <tbody>
      <tr>
        <td height="35" align="left" valign="middle">
          <table width="980" border="0" cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <td width="20" height="20">&nbsp;</td>
                <!-- <td><img src="../images/1.gif" alt="" width="18" height="16"><span class="STYLE9"><span class="STYLE10">日志</span></span></td> -->
              </tr>
            </tbody>
          </table>
        </td>
      </tr>

      <tr>
        <td height="51" align="center" valign="middle">
          <table width="980" border="0" cellpadding="1" cellspacing="1">
            <tbody>
              <tr>
                <td height="34">
                  <fieldset>
                    <legend align="center">
                      <font class="STYLE6" color="#000000">日志记录 </font>
                    </legend>
                    <form name="f1" action="/SetCABISS" method="post" onsubmit="return checkBISS();" style="margin: 20px;">
                      <table id="table" border="0" cellpadding="1" cellspacing="1" width="100%">
                        <thead>
                          <tr valign="center" bgcolor="#D7D7D7" style="height: 30px;">
                            <td width="160">设备时间</td>
                            <td width="81">日志类型</td>
                            <td>模块</td>
                            <td>日志内容</td>
                          </tr>
                        </thead>
                        <tbody></tbody>
                      </table>

                      <div style="cursor: pointer;margin-top: 20px;">
                        <div class="first" id="home">首页</div>
                        <!-- <a href="javascript:currentPage(-1);" class="first" id="before">上一页</a> -->
                        <div class="first" id="before">上一页</div>
                        <div id="number">
                        </div>
                        <!-- <a href="javascript:currentPage(1);" class="first" id="next">下一页</a> -->
                        <div class="first" id="next">下一页</div>
                        <div class="first" id="last">尾页</div>
                        <div class="first">
                          总共 <span id="taTalDataNumber"></span> 条记录
                        </div>
                        <div class="current"></div>
                        <div class="jump">
                          <input type="text" id="inp"></input>
                          <div class="l_jump">跳转</div>
                        </div>
                      </div>
                    </form>
                  </fieldset>
                </td>
              </tr>
            </tbody>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
  <!-- // 翻页功能的变量，函数 -->
  <script type="text/javascript">
    var arrTotal = [];
    var arrType = ['错误','警告','信息'];
    var pages = 1; //表示页数
    var totalPages = 0;
    var sign = 1; //记录当前第几个块，比如我规定最多显示10个块，那么sign的取值范围就是1-10
    var b_sign = 1; //记录sign变动之前的sign数值
    var count;

    // var real_count=count<=5?count:5;//定义最多有多少块
    var real_count=count;//定义最多有多少块
    var real_change = 0;
    var o = 0;
    if (real_count % 2 == 0) {
      real_change = real_count / 2;
    } else {
      real_change = real_count / 2 + 0.5;
      var o = 1;
    }
    //初始化块
    let i = 1;
    while (i <= real_count) {
      var val = "<div class='num' pageNum='" + i + "' id=" + i + ">" + i + "</div>";
      $("#number").append(val)
      i++;
    }
    function getTotalPages(){
      return totalPages = arrTotal.length
    }
    // //表示每页显示几条数据
    function getListLength(){
      return getTotalPages() < 20 ? getTotalPages() : 20
    }
    //记录总共页数
    function getPagesCount(){
        return count = Math.ceil(getTotalPages() / getListLength())
    }
    function query_all() { //查找id='number'块的所有子节点
      nodes = $("#number").find("div");
      length = nodes.length;
    }
    // query_all();

    function currentPage() { //获取当前page
      var useCur = "#" + sign;
      debugger
      if(count == 1){
        $("#before").css({
          "visibility": "hidden"
        });
        $("#next").css({
          "visibility": "hidden"
        });
        $("#last").css({
          "visibility": "hidden"
        });
      }
      // $(".current").text("当前" + $(useCur).text() + "/" + count + "页");
      $(".current").text("当前" + sign + "/" + count + "页");
      $("#taTalDataNumber").text(getTotalPages());

      var otbod = document.getElementById('table').tBodies[0]
      var s = otbod.rows.length;
      for (i = 0; i < s; i++) {
        otbod.removeChild(otbod.rows[0])
      }
      pages = sign;
      var pageIndex = (pages - 1) * getListLength() //页数-1 乘以每页现实多少条 结果为 本页从第几条开始
      // 在最后一页时对余数循环
      for (var i = 0; i < getListLength(); i++) {
        var otr = document.createElement('tr');
        var otd1 = document.createElement('td');
        var otd2 = document.createElement('td');
        var otd3 = document.createElement('td');
        var otd4 = document.createElement('td');
        otd1.innerHTML = arrTotal[pageIndex]['time'];
        otd2.innerHTML = arrType[arrTotal[pageIndex]['level']];
        otd3.innerHTML = arrTotal[pageIndex]['module'];
        otd4.innerHTML = arrTotal[pageIndex]['message'];
        otr.appendChild(otd1);
        otr.appendChild(otd2);
        otr.appendChild(otd3);
        otr.appendChild(otd4);
        otbod.appendChild(otr);
        $(otr).css({
          "color": "#000066"
        });
        if (pageIndex == getTotalPages()-1) {
          break
        }
        pageIndex++
      }
    }
    // currentPage();
    var b_change = function () { //将当前第sign块样式还原
      b_sign = sign;
      var useBchange = "#" + b_sign;
      $(useBchange).css({
        "border": "1px solid #e6e6e6",
        "color": "#666"
      });
    }
    var blue_change = function (c) { //将当前sign块样式改变，好区别于其他块
      var useBlueChange = "#" + c;
      $(useBlueChange).css({
        "border": "none",
        "color": "#3e89fa"
      });
    }
    // blue_change(sign); //页面第一次加载的时候，改变指定块样式

    function go_back(now_sign, kit) { //当前sign块先还原样式,再改变sign,再改变改变后的sign块样式
      b_change();
      if (kit == 0) {
        sign = now_sign;
      } else if (kit == 1) {
        if (sign != real_count)
          sign++;
      } else if (kit == 2) {
        if (sign != 1)
          sign--;
      }
      blue_change(sign);
    }

    function change_add(c_add, kit) { //遍历改变id='number'的子节点内容
      let p = c_add;
      for (let j = 0; j < length; j++) {
        if (kit == 0) {
          nodes[j].innerHTML = p;
          p++;
        } else if (kit == 1) {
          nodes[j].innerHTML = p;
          p--;
        } else if (kit == 2) {
          nodes[j].innerHTML = parseInt(nodes[j].innerHTML) + 1;
        } else if (kit == 3) {
          nodes[j].innerHTML = parseInt(nodes[j].innerHTML) - 1;
        }
      }
    }
    // 点击跳转至某一页的函数
    function for_num(use, id) {
      let error_1 = "#" + real_change;
      //页面在最前或最后
      if ($(error_1).text() == real_change || $(error_1).text() == count - real_change + 1) {
        //判断点击的第一个一半的前面还是点击的第二个一半的后面
        if ($(use).text() <= real_change || $(use).text() > count - real_change) {
          go_back(id, 0);
        } else {
          go_back(real_change, 0);
          change_add($(use).text() - (real_change - 1), 0);
        }
        currentPage();
      } else {
        var inner = (o == 0) ? $(use).text() >= count - real_change : $(use).text() > count - real_change;
        if ($(use).text() <= real_change || inner) {
          if ($(use).text() <= real_change) {
            go_back($(use).text(), 0);
            change_add(1, 0);
          } else {
            go_back(real_count - (count - $(use).text()), 0);
            change_add(count - real_count + 1, 0);
          }
        } else {
          go_back(real_change, 0);
          change_add($(use).text() - (real_change - 1), 0);
        }
      }
      currentPage();
    }
  
    </script>
  <!-- 请求接口获得表格数据 -->
  <script>
    // 生成日志json,刷新日志信息
      function get_journal(){
        $.ajax({
          url: '/tmp/journal.json?' + Math.random(),
          method: 'get',
          dataType: "json",
          async: false,
          success: function (fileText) {
            arrTotal = fileText['EVENTS'];
            getTotalPages();
            getPagesCount()
            query_all();
            currentPage();
            blue_change(sign); //页面第一次加载的时候，改变指定块样式
          }
        })
      }
      $(document).ready(function(){
        // 生成日志json,刷新日志信息
        $.ajax({
          url: '/AJAX_Refresh_JournalInfo?' + Math.random(),
          method: 'post',
          dataType: 'text',
          success: function (data)
          {},
          error:function(data)
          {}
        });
        get_journal();
      });
    
  </script>
  <!-- 事件 -->
  <script type="text/javascript">
  //遍历每个子div块，并为他们增加点击事件
  for (var j = 0; j < length; j++) {
    var id = nodes[j].getAttribute("id");
    var useNum = "#" + id;
    $(useNum).bind("click", function () {
      for_num(useNum, id);
    });
  }
  // 首页
  $("#home").bind("click", function () {
    go_back(1, 0);
    change_add(1, 0);
    currentPage();
  });
  // 尾页
  $("#last").bind("click", function () {
    go_back(real_count, 0);
    change_add(count - real_count + 1, 0);
    currentPage();
  });
  // 点击上一页
  $("#before").bind("click", function () {
    var useBefore = "#" + sign;
    var inner = (o == 0) ? $(useBefore).text() >= count - real_change : $(useBefore).text() > count - real_change + 1;
    if ($(useBefore).text() <= real_change || inner) {
      go_back(0, 2);
      currentPage();
    } else {
      change_add(0, 3);
      currentPage();
    }
  });
  // 点击下一页
  $("#next").bind("click", function () {
    var useNext = "#" + sign;
    if ($(useNext).text() != count) {
      var inner = (o == 0) ? $(useNext).text() >= count - real_change : $(useNext).text() > count - real_change;
      if ($(useNext).text() < real_change || inner) {
        go_back(0, 1);
        currentPage();
      } else {
        change_add(0, 2);
        currentPage();
      }
    }
  });
  $(".l_jump").bind("click", function () {
    let val = $("#inp").val(); //获取输入框的值
    val = parseInt(val);
    if (val >= 1 && val <= count) {
      var inner = (o == 0) ? val >= count - real_change : val > count - real_change;
      if (val <= real_change || inner) //如果是在最前面的一半以前，或者是在最后面的一半以后
      {
        if (val <= real_change) {
          go_back(val, 0);
          change_add(1, 0);
        } else {
          go_back(real_count - (count - val), 0);
          change_add(count - real_count + 1, 0);
        }
      } else {
        go_back(real_change, 0);
        change_add(val - (real_change - 1), 0);
      }
    } else {
      alert("没有这么多页");
    }
    currentPage();
  });
  </script>
</body>

</html>